<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.bundle.min.js"></script>
    <style type="text/css">
		body{
			/* background: #f3f3f3; */
			background: url("/img/login/login-4.jpeg" ) no-repeat center center fixed;
			background-size: cover;	
		}
	</style>
</head>
<body>
<!--导航条-->
<div th:insert="~{navigation::nav}"></div>


  <div class="container">
         <div class="row">
             <div class="col-md-12">
<!--                 瀑布流布局-->
                 <div class="card-columns">
                     
					 <div class="card" th:each="pet:${pets}">
						 <!-- border属性去掉 -->
						 <a href="#">
                         <img th:src="${pet.petPic}"
                             alt="" class="card-img-top">
						</a>
                        <div class=" card-body">
                             <h5 class="card-title" th:text="${pet.petType}"></h5>
                            <p style="overflow: hidden; text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;">
                                <span th:text="${pet.petDetail}"></span>
                            </p>
                             <a th:if="${session.Name==null}" href="/login" class="btn btn-primary">请先登录再进行操作</a>
							 <a th:if="${session.Name!=null}" th:href="@{'/adoption/'+${pet.petId}}" class="btn btn-primary">想领养</a>
                         </div>
                     </div>

                 </div>
             </div>
         </div>
     </div>
 
</body>
</html>
